<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>所有日记</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="css/style.css">
  <script src="./js/jquery-2.1.4.min.js"></script>
  <script src="./layui-v2.6.8/layui/layui.js"></script>
<!--  <script src="./js/xm-select.js"></script>-->
</head>
<body style="overflow-y: hidden">
<!--<div class="layui-container">-->
  <div class="layui-fluid">
          <div id="view" class="layui-col-lg12">
            <!--模板放在此处-->

              <!--        搜索条-->
            <form class="layui-form" action="" id="searchForm">
              <div class="layui-form-item">

<!--                    <input type="hidden" name="userId" id="inputUserId">-->
                    <div class="layui-col-lg2">
                      <label class="layui-form-label">年</label>
                      <div class="layui-input-block">
                        <select id="selectYear" name="year" lay-verify="required">
                          <option value="0" selected="selected">全部</option>
<!--                          <option value="2021">2021</option>-->
                        </select>
                      </div>
                    </div>
                    <div class="layui-col-lg2">
                      <label class="layui-form-label">月</label>
                      <div class="layui-input-block">
                        <select id="selectMonth" name="month" lay-verify="required">
                          <option value="0" selected="selected">全部</option>
<!--                          <option value="1">1</option>-->
<!--                          <option value="2">2</option>-->
                        </select>
                      </div>
                    </div>
                    <div class="layui-col-lg2">
                      <label class="layui-form-label">日</label>
                      <div class="layui-input-block">
                        <select id="selectDay" name="day" lay-verify="required">
                          <option value="0" selected="selected">全部</option>
<!--                          <option value="1">1</option>-->
                        </select>
                      </div>
                    </div>

                    <div class="layui-col-lg6">
                      <!--           关键词输入框-->
                      <label class="layui-form-label">关键词</label>
                      <div class="layui-input-block">
                        <input type="text" id="inputKeyword" name="content"  placeholder="请输入关键词" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">标签</label>
                    <div class="layui-input-block" id="selectTags">
<!--                      <input type="checkbox" name="tagList" title="写作" value="6" checked>-->
<!--                        <input type="checkbox" name="tagList" title="开心" value="1" checked>-->
                    </div>
                  </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo" id="searchBtn" type="button">搜索</button>
<!--                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
              </div>

            </form>

<!--            显示日记-->
            <hr class="layui-border-black">
            <div>

              <ul id="showDiaries">
                <!--一条日记格式-->
<!--                <li did="1">-->
<!--                <h2><strong>用户1日记1</strong></h2>-->
<!--                <p>2021-8-7</p>-->
<!--                <p>-->
<!--                  用户1日记1用户1日记1用户1日记1用户1日记1-->
<!--                  用户1日记1用户1日记1用户1日记1用户1日记1-->
<!--                  用户1日记1用户1日记1用户1日记1用户1日记1-->
<!--                  用户1日记1用户1日记1用户1日记1用户1日记1-->
<!--                </p>-->
<!--                <p>-->
<!--                  <strong>标签1&nbsp;标签2&nbsp;标签3</strong>-->
<!--                </p>-->
<!--                <hr class="layui-border-cyan">-->
<!--                </li>-->

              </ul>
            </div>
<!--            显示日记结束-->
<!--            分页-->
            <div>
              <div id="pageNavi"></div>
<!--              <ul id="biuuu_city_list"></ul>-->
            </div>
<!--          </div>-->
<!--            中间内容结束-->

    </div>
  </div>
<!--</div>-->

  <script type="text/javascript">
    var userId = getCookie("user_id"); //用户id
    // var userId = '1';
    var dataPerPage = 4; //每页展示的数据量
    // var appPath = getPath();
    var appPath = "";
    // console.log("path", appPath);
    function getPath() {
        var pathName = document.location.pathname;
        var index = pathName.substr(1).indexOf("/");
        var result = pathName.substr(0,index+1);
        return result;
    }

    $(function () {
      fillSelected(userId);
      searchByUserId(userId);

      document.getElementById('searchBtn').addEventListener('click', function () {
        searchByConditions();
      });
        document.getElementById('inputKeyword').addEventListener('change', function () {
            searchByConditions();
        });

    });

    function toDiary(obj) {
        // console.log(this);
        // console.log($(this));
        // var did = $(this).attr("did");
        var did = obj.getAttribute('did');
        // console.log("did",did);
        var myurl="spread.html"+"?"+"did="+did;
        // console.log("url", myurl);
        // var myurl="Spread.html";
        window.open(myurl);
        // window.location.assign( myurl);
    }

    function searchByUserId(userId) {
      $.ajax({
        url: appPath+'/diaries/all/'+userId,
        type: 'GET',
        data:"",
        success: function (result) {
          // console.log(result);
          var diaries1 = result.extend.diaries;
          // console.log("diaries", diaries1);
          laypage(diaries1);
        }
      });
    }

    //查询名字为findCookieName的cookie值
    function getCookie(cookieName) {
        //获取所有的Cookie,在strCookie是一个包含所有cookie的字符串。
        var strCookie = document.cookie;
        //以;为分隔符将所有的cookie进行分割。将获得的所有cookie切割成数组
        var arrCookie = strCookie.split("; ");
        //通过for循环进行遍历arrCookie数组。
        for(var i = 0; i < arrCookie.length; i++){
            //通过=进行分割，将本次循环的cookie分割为名字（等于号前），值（等于号后面）
            var arr = arrCookie[i].split("=");
            //将本次循环的cookie名字与需要查找的cookie进行比较
            if(cookieName == arr[0]){
                //返回指定cookie的值
                return arr[1];
            }
        }
        //未查找到指定的cookie返回空。
        return null;
    }

    // function getCookie(cname)
    // {
    //     var name = cname + "=";
    //     var ca = document.cookie.split(';');
    //     for(var i=0; i<ca.length; i++)
    //     {
    //         var c = ca[i].trim();
    //         if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    //     }
    //     return null;
    // }

    function searchByConditions() {
      var date = $('#selectYear').val() + '-' + $('#selectMonth').val() + '-' + $('#selectDay').val();
      var data = $('#searchForm').serialize() + '&userId=' + userId;
      $.ajax({
          url:appPath+'/diaries/search'+'?date='+date,
          type: 'POST',
          data: data,
          success: function (result) {
              // console.log(result);
              var diaries2 = result.extend.diaries;
              laypage(diaries2);
          }
      })
    }


    function fillSelected(userId) {
      for(let i=1; i<13; i++) {
        $('#selectMonth').append(new Option(i,i));
      }
      for(let i=1; i<32; i++) {
        $('#selectDay').append(new Option(i,i));
      }
      $.ajax({
        url: appPath+'/diaries/years/'+userId,
        type: 'GET',
        data: '',
        success: function (result) {
          // console.log(result);
          var years = result.extend.years.concat();
          for(let i=0; i<years.length; i++) {
            $('#selectYear').append(new Option(years[i], years[i]));
          }
          layui.form.render("select");
        }
      });
      $.ajax({
        url: appPath+'/tags/'+userId,
        type: 'GET',
        data: '',
        success: function (result) {
          var tagsStr = '';
          var tags = result.extend.tags.concat();
          for(let i=0; i<tags.length; i++) {
            // <input type="checkbox" name="tagList" title="写作" value="1" checked>
            tagsStr += '<input type="checkbox" name="tagList" title="' + tags[i].tagName +
                    '" value="' + tags[i].id + '" checked>';
          }
          document.getElementById('selectTags').innerHTML = tagsStr;
          layui.form.render();
        }
      });

      layui.form.render();
    }

    function laypage(diaries) {
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
                , layer = layui.layer;
        //调用分页
        laypage.render({
          elem: 'pageNavi'
          , count: diaries.length
          , limit: dataPerPage
          , jump: function (obj) {
            //模拟渲染
            document.getElementById('showDiaries').innerHTML = function () {
              var arr = [];
              var thisData = diaries.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);

              layui.each(thisData, function (index, item) {
                var contentSub = item.content.substring(0, Math.min(item.content.length, 180));
                var date = new Date(item.datePublished);
                // console.log(typeof date);
                  var month = date.getMonth()+1;
                var dateStr = date.getFullYear()+'-'+ month + '-' +date.getDate()
                        + ' ' + date.getHours() + ':' + date.getMinutes() + ':' +date.getSeconds();

                var tags = "";
                for( let i=0; i<item.tagList.length; i++) {
                  tags += item.tagList[i].tagName + "  ";
                }
                  // <a href="http://www.w3school.com.cn">W3School</a>
                var show = '<li>' + //'<li did="'+ item.id + '">' +
                        '<h1><strong><a href="#" onclick="toDiary(this)" did="'+item.id+'"> ' + item.title + '</a></strong></h1>' +
                        '<p>' + dateStr + '</p>' +
                        '<p>' + contentSub + '</p>' +
                        '<p><strong>' + tags + '</strong></p></li>' + '<br />'
                arr.push(show);
              });
              return arr.join('');
            }();
          }
        });
      });
    }
  </script>

</body>

<style>
  /*body {*/
  /*  background-color: lightblue;*/
  /*}*/

  /*h1 {*/
  /*  color: white;*/
  /*  text-align: center;*/
  /*}*/

  p {
    font-family: verdana;
    font-size: 20px;
  }
  #pageNavi {
    /*background-color: #1AA094;*/
    z-index: 99999;
    position: fixed;
    bottom: 0;
  }
</style>
</html>
